<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="预算"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <div class="budget" @click="$router.push('/my_budget')">
        <p class="title">
          <span>
            <span>{{month}}</span>月总预算
          </span>
          <span @click="() => {
            this.show = true
          }">
            编辑本月总预算 <van-icon name="arrow" />
          </span>
          <van-popup v-model="show" round style="height: 1.50rem; width: 3.00rem;">
            <p>编辑总预算</p>
            <input type="text" placeholder="请输入预算金额">
            <button>取消</button>
            <button>确定</button>
          </van-popup>
        </p>
        <div class="BudgetContent">
          <van-row>
            <van-col span="8">
              <span v-if="ProgressTitle === 2" class="surplus">
                剩余
              </span>
              <span v-if="ProgressTitle === 0" class="NotSet">
                未设置
              </span>
              <span v-if="ProgressTitle === 3" class="Overspending">
                已超支
              </span>
              <!-- rate: 圆环进度,后期data动态绑定 -->
              <van-circle v-model="currentRate" :rate=BudgetShare :speed="100" :text="text" stroke-width="120" size=".80rem" layer-color="#eaeaea" color="#fdd949" style="margin-top: .05rem;"/>
            </van-col>
            <van-col span="16" >
              <p>
                <span>
                  剩余预算:
                </span>
                <span>
                  {{RemainingBudget}}.00
                </span>
              </p>
              <p>
                <span>
                  本月预算:
                </span>
                <span>
                  {{BudgetOfThisMonth}}.00
                </span>
              </p>
              <p>
                <span>
                  本月支付:
                </span>
                <span>
                  {{PaymentThisMonth}}.00
                </span>
              </p>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入请求数据函数
import { userbudget } from '@/api'
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Circle, Icon, Row, Col, Popup } from 'vant'
Vue.use(NavBar)
Vue.use(Circle)
Vue.use(Icon)
Vue.use(Row)
Vue.use(Col)
Vue.use(Popup)
export default {
  // 设置data初始值
  data () {
    return {
      currentRate: 0, // 圆形总进度条
      month: '', // 当前月份, (最多支持至前4个月的预算)
      RemainingBudget: 0, // 剩余预算 ===> 剩余预算 = 本月预算 - 本月支付
      BudgetOfThisMonth: 200, // 本月预算,需要后端数据
      PaymentThisMonth: 23, // 本月支付,需要后端数据
      BudgetShare: 0, // 剩余预算占总预算的占比 = 剩余预算 / 本月预算 ===> 1 以内的小数,可以继续下一步的计算一类的转换为100为基准的
      ProgressTitle: 0, // 控制圆形进度条中显示的标题, 0: 未设置, 1: 正常显示进度, 2: 已超支
      show: false
    }
  },
  computed: {
    text () {
      // 圆形进度条
      if (this.ProgressTitle === 2) {
        return this.currentRate.toFixed(0) + '%'
      } else {
        return ''
      }
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    // 剩余预算 = 本月预算 - 本月支付
    // this.RemainingBudget = this.BudgetOfThisMonth - this.PaymentThisMonth
    // 当前月份
    const date = new Date()
    this.month = date.getMonth() + 1
    // 剩余预算占总预算的占比
    // this.BudgetShare = Math.round((this.RemainingBudget / this.BudgetOfThisMonth) * 100)
    // 获取用户预算数据
    userbudget().then((res) => {
      // console.log(res.data.data[0])
      this.BudgetOfThisMonth = res.data.data[0].budget // 本月预算
      this.PaymentThisMonth = res.data.data[0].disburse // 本月支付
      // 剩余预算 = 本月预算 - 本月支付
      this.RemainingBudget = this.BudgetOfThisMonth - this.PaymentThisMonth
      // 先判断一下
      // 判断,若是本月预算为0,则为未设置预算 状态为0; 若是本月支付大于本月预算且本月预算不为0,则为已超支 状态为3; 若是其他情况则为正常显示 状态为2
      if (this.BudgetOfThisMonth === 0) { // 未设置
        this.ProgressTitle = 0 // 状态
        this.RemainingBudget = 0 // 剩余预算
        this.PaymentThisMonth = 0 // 本月支付
      } else if (this.PaymentThisMonth > this.BudgetOfThisMonth && this.BudgetOfThisMonth !== 0) { // 已超支
        this.ProgressTitle = 3
      } else { // 正常
        this.ProgressTitle = 2
        // 剩余预算占总预算的占比 = 剩余预算 / 总预算
        this.BudgetShare = Math.round((this.RemainingBudget / this.BudgetOfThisMonth) * 100)
      }
    })
  },
  // 计算属性
  methods: {}
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  // 总预算
  .budget {
    height: 1.20rem;
    padding: .1rem;
    border-bottom: .015rem #eeeeee solid;
    background-color: #fcfcfc;
    .title {
      display: flex;
      justify-content: space-between;
      line-height: .15rem;
      span {
        &:nth-of-type(1) {
          font-size: .15rem;
        }
        &:nth-of-type(2) {
          font-size: .10rem;
          color: #a5a5a5;
        }
      }
    }
    .BudgetContent {
      .van-row {
        .van-col {
          margin-top: .05rem;
          height: .74rem;
          // background-color: burlywood;
        }
        // 左边圆形进度框
        .van-col--8 {
          position: relative;
          padding-left: .12rem;
          // 标题为剩余
          .surplus {
            font-size: .10rem;
            color: #c5c5c5;
            position: absolute;
            top: 34%;
            left: 37%;
          }
          // 标题为未设置,已超支
          .NotSet, .Overspending {
            font-size: .16rem;
            color: red;
            position: absolute;
            top: 48%;
            left: 27%;
          }
          /deep/ .van-circle__text {
            top: 60%;
            font-size: .16rem;
            color: #444444;
          }
        }
        // 右侧内容
        .van-col--16 {
          p {
            display: flex;
            justify-content: space-between;
            &:nth-of-type(1) {
              margin-bottom: .10rem;
              font-size: .15rem;
            }
            &:nth-of-type(2), &:nth-of-type(3) {
              font-size: .12rem;
              color: #c5c5c5;
              margin-bottom: .05rem;
            }
          }
        }
      }
    }
  }
</style>
